<template>
    <div class="wrap-container sn-container">
        <div class="sn-content">
            <div class="sn-title">
                <div>
                    净申购(亿元)
                </div>
                <div>
                    <span>展示维度:</span>
                    <el-select v-model="typeOptionValue">
                        <el-option
                                v-for="item in typeOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                    <span>日期:</span>
                    <el-date-picker
                            v-if="typeOptionValue=='0'"
                            v-model="option1Value"
                            format="yyyy-M-d"
                            value-format="yyyy-M-d"
                            type="date"
                            placeholder="选择日期">
                    </el-date-picker>
                    <el-date-picker
                            v-if="typeOptionValue=='1'"
                            v-model="option2Value"
                            format="yyyy-M"
                            value-format="yyyy-M"
                            type="month"
                            placeholder="选择日期">
                    </el-date-picker>
                </div>
            </div>
            <div class="sn-body">
                <div class="wrap-container">
                    <div class="chartsdom" id="net_purchase"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "netPurchase",
        data(){
            return{
                option:{
                    lastedTime:"",
                    color: ['#68e5f0', '#d99d78', '#4cabce'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        textStyle:{
                            color: '#ffffff'//字体颜色
                        },
                        top:25,
                        data: ['申购', '赎回', '净申购']
                    },
                    xAxis: [
                        {
                            type: 'category',
                            axisTick: {show: true},
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#ffffff'
                                }
                            },
                            data: ['2020-8-25', '2020-8-26', '2020-8-27', '2020-8-28', '2020-8-31','2020-9-1']
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            axisLine: {show:false},
                            axisTick: {show:false},
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#ffffff'
                                }
                            }
                        },
                        {
                            type: 'value',
                            axisLine: {show:false},
                            axisTick: {show:false},
                        }
                    ],
                    series: [
                        {
                            name: '申购',
                            type: 'bar',
                            barGap: 0,
                            label: 1,
                            data: [50, 20, 40.21, 60, 58,65]
                        },
                        {
                            name: '赎回',
                            type: 'bar',
                            label: 2,
                            data: [65, 30, 32.15, 35, 60,50]
                        },
                        {
                            name: '净申购',
                            type: 'bar',
                            label: 3,
                            data: [-15, -15, 8.06, 25,-2,15]
                        },
                    ]
                },
                typeOptions:[
                    {
                        label:"按日",
                        value:0
                    },
                    {
                        label:"按月",
                        value:1
                    }
                ],
                typeOptionValue:0,
                option1Value:"2020-9-1",
                option2Value:"2020-09",
            }
        },
        mounted() {
            this.getEchart()
        },
        methods:{
            getEchart() {
                let myChart = echarts.init(document.getElementById('net_purchase'));
                myChart.setOption(this.option, true);
                window.addEventListener('resize', () => {
                    myChart.resize();
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
    .sn-container {
        left: 1270px;
        top: 1580px;
        width: 600px;
        height: 400px;
        .chartsdom {
            width: 100%;
            height: 100%;
        }
    }
    /deep/.sn-title{
        display: flex;
        div:nth-child(2){
            margin-left: auto;
            display: flex;
            .el-select{
               width: 80px;
            }
            .el-date-editor{
                width: 120px;
            }
            .el-input__inner{
                height: 20px !important;
            }
        }
    }
</style>